<template>
    <div id="Mall_Product" :style="'width:'+productWidth+'px;height:'+(productWidth+115)+'px'" :class="direction" @click.stop="goToProductIndex">
      <ul>
        <li class="productTag">
          <van-tag plain v-if="isNew" color="#e96f72">New</van-tag>
        </li>
        <li class="productImg" :style="'min-height:'+productWidth+'px'">
          <div class="theImg" :style="'background:url('+productInfo.img_src+');background-size:cover;background-position:center;background-repeat:no-repeat;height:'+productWidth+'px;width:'+productWidth+'px'"></div>
        </li>
        <li class="productName">
          <span :style="'width:'+productWidth+'px'">{{(lang==='cn')?productInfo.title:productInfo.title_en}}&nbsp;</span>
        </li>
        <li class="productDesc">
          <span :style="'width:'+productWidth+'px'">{{(lang==='cn')?productInfo.desc:productInfo.desc_en}}&nbsp;</span>
        </li>
        <li class="productPrice">
          <span :style="'width:'+productWidth+'px'" v-if="lang==='cn'">{{productInfo.price}}&nbsp;{{$t('mall.price')}}&nbsp;</span>
          <span :style="'width:'+productWidth+'px'" v-else>{{$t('mall.price')}} {{productInfo.price_en}}</span>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "Mall_Product",
      props:{
        productInfo:{},
        productWidth:Number,
        direction:String,
        isNew:Boolean,
      },
      computed:{
        title:{
          get(){
            let title='';
            if(this.lang==='cn'){
              title=this.productInfo.title
            }else{
              title=this.productInfo.title_en;
            }
            if(title.length>13){
              title=title.slice(0, (13 - 3))+'...';
            }
            return title;
          },
          set(){}
        },
        lang: {
          get() {
            let storageData = window.sessionStorage.getItem('lang');
            if (this.$store.state.lang !== storageData && storageData !== 'null') {
              this.$store.dispatch('toChangeLang', storageData);    //同步操作
            }
            return this.$store.getters.getLang;
          },
          set() {
          }
        },
      },
      methods:{
          getTitle(str){
            //console.log(str.length);
            if(str!==undefined&&str.length>13){
              str=str.slice(0, (13 - 3))+'...';
            }
            return str;
          },
          goToProductIndex(){
            let id=this.productInfo.id;
            this.$store.dispatch('toChangeProductIndexId', id);
            this.getJson(id,this.lang);
            this.$store.dispatch('toChangeAboutUsOrOurProductsId', id);
            this.$store.dispatch('toChangeNowPage','/');
            this.$store.dispatch('toChangeCurrentPageText', this.productInfo.title);
            this.$router.push('/');
          },
        //获取产品信息
        getJson(id,lang){
          let _this=this;
          this.axios.get(domain.url+'product/api/get_product', {
            params: {
              id:id,
              language:lang,
              equipment:'mobile'
            }
          })
            .then(function (response) {
              console.log(response);
              _this.$store.dispatch('toChangeProductInfo',response.data);
            })
            .catch(function (error) {
              console.log(error);
            });
        },

      }
    }
</script>

<style scoped>
#Mall_Product{
  color:#000;
  padding: 0;
  float: left;
  background: #FFF;
  margin-top: 10px;
  cursor: pointer;
}
  #Mall_Product ul li{
    margin-top: 0;
    padding-bottom: 5px;
  }
  #Mall_Product ul .productTag{
    text-align: left;
    height:20px;
  }
  #Mall_Product ul .productName{
    font-size:13px;
  }
  #Mall_Product ul .productDesc{
    font-size:10px;
    color:#aeaeae;
  }
  #Mall_Product ul .productPrice{
    font-size:13px;
    color:#e96f72;
    margin-bottom: 15px;
  }
#Mall_Product ul .productName span{
  display: block;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
#Mall_Product ul .productDesc span{
  display: block;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
#Mall_Product ul .productPrice span{
  display: block;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.productImg .theImg{
  font-size: 0;
}

  .van-tag{
    border-radius: 0;
  }
  .left {
   margin-left: 10px;
  }
  .right {
    margin-left: 10px;
  }
</style>
